<template>
	<view>
		<view>
			<bg-video></bg-video>
			<cu-custom bgColor="bg-purple" :isBack="true">
				<block class="text-white" slot="content">课程详细</block>
			</cu-custom>
		</view>
		<view class="bg-white">
			<view class="flex relative">
				<image v-if="akecheng.cover" class="flex-sub" :src="akecheng.cover" mode="aspectFill"></image>
				<view class="bg-red padding-sm absolute left0 bottom0">{{kczt[akecheng.zt]}}</view>
			</view>
			<view>
				<view class="padding flex justify-between">
					<text>{{akecheng.kcname}}</text>
				</view>
				<view v-if="akecheng.zt != 'C'" class="padding">
					<view class="text-gray text-sm flex justify-between">
						<text>{{akecheng.st}}~{{akecheng.et}}</text>
						<view class="text-gray text-sm">
							<text class="cuIcon-myfill">{{akecheng.ybrs}}</text>
							<text class="cuIcon-my margin-left-sm">{{akecheng.zxrs}}</text>
							<text class="cuIcon-friend margin-left-sm">{{akecheng.zdrs}}</text>
						</view>
					</view>
				</view>
			</view>
		
			<view v-if="akecheng.zt != 'C'" class="bg-white margin-top">
				<view class="padding solid-bottom flex bg-pink justify-start align-baseline">
					<view class="text-white title">
						<text class="text-xxl  ">
							<text class="iconfont icon-yishangkekeshishu"></text>
						</text>
						<text>课程章节</text>
					</view>
				</view>
				<view>
					<view class="cu-timeline" v-for="(kechengitem,index) in akechengitems" :key="index">
						<view class="w-100 padding-top padding-bottom text-pink">
							<view class="flex justify-start padding-left">
								<text class="margin-right-sm">{{kechengitem.dt}}</text>
								<text>{{kechengitem.st}}</text>~
								<text>{{kechengitem.et}}</text>
							</view>
			
						</view>
						<view class="cu-item">
							<view :style="'background-image:url('+kechengitem.scover+'); background-size: 100% 100%;'">
								<view class="position-relative">
									<view class="kibackground"></view>
									<view class="padding position-relative">
										<view class="cu-capsule radius">
											<view class="cu-tag bg-pink">第{{index+1}}节</view>
											<view class="cu-tag line-pink">{{kechengitem.itemname}}</view>
										</view>
										<view class="margin-top">
											<view class="text-black">{{kechengitem.sname}}</view>
											<view class="margin-top-sm flex">
												<view class="cu-avatar lg"
													:style="'background-image:url('+kechengitem.rcover+');'">
			
												</view>
												<view class="flex-treble flex align-center padding-left-sm text-black">
													{{kechengitem.rname}}
												</view>
											</view>
										</view>
									</view>
								</view>
			
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="akecheng.zt != 'C'" class="bg-white margin-top">
				<view class="padding solid-bottom flex bg-pink justify-start align-baseline">
					<view class="text-white title">
						<text class="text-xxl  ">
							<text class="cuIcon-addressbook"></text>
						</text>
						<text>介绍</text>
					</view>
				</view>
				<view class="padding-sm" v-html="akecheng.ms"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				kczt: this.constant.kczt.KCZT,
				akecheng: {},
				akechengitems: [],
				ajiaolian: {},
				akechenglx: {},
			}
		},
		onLoad: function(option){
			this.akecheng.kcid = option.kcid;
			this.loadKc();
		},
		methods: {
			loadKc: function() {
				this.api("/kc/info/get").send({
					kcid: this.akecheng.kcid
				}).then(data => {
					this.akecheng = data.akecheng;
					this.akechengitems = data.kechengitems;
					this.ajiaolian = data.jiaolian;
					this.akechenglx = data.akechenglx;
				});
			},
		}
	}
</script>

<style>
	.kibackground {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>